﻿@{
    ViewBag.Title = "Home Page";
}

<div class="theDraggable" style="border:1px solid red">Ceci est un test</div>

<table>
    <tbody id="sortable">
        <tr>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
    $(function () {
        $("#sortable").sortable({
            revert: true,
            stop: function (event, ui) {
                if (!ui.item.data('tag') && !ui.item.data('handle')) {
                    ui.item.data('tag', true);
                    ui.item.fadeTo(400, 0.1);
                }
            }
        });
        
        $('.theDraggable').draggable({
            connectToSortable: "#sortable",
            helper: 'clone',
            revert: 'invalid'
        });

        $("#sortable").disableSelection();
    });
</script>